<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="renderer" content="webkit" />
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <title>Title</title>
    <link href="/Content/LMS/css/base/reset.css" rel="stylesheet" />
    <link href="/Content/LMS/css/base/base.css" rel="stylesheet" />
    <!--<link href="css/fonts/icomoon/style.css" rel="stylesheet" />-->
    <link href="/Content/LMS/plugins/modal/modal.css" rel="stylesheet" />
    <link href="/Content/LMS/plugins/swiper3/swiper.min.css" rel="stylesheet" />
    <link href="/Content/LMS/plugins/imageview/swiper.imageview.css" rel="stylesheet" />
    <link href="/Content/LMS/css/struct/custom.css" rel="stylesheet" />
    <link href="/Content/LMS/css/struct/layout.css" rel="stylesheet" />
    <link href="/Content/LMS/css/theme/default/style.css" rel="stylesheet" />
    <link href="/Content/LMS/css/template.css" rel="stylesheet" />
</head>
<body>
    <div class="background"></div>
    <div class="left-menu" data-struct="header footer">
        <header class="menu-header">
            <h3>User Info</h3>
            <div class="sub-title">Nothing is impossible!</div>
        </header>
        <div class="container">
            <ul class="list nbt nbg">
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
        </div>
        <footer class="menu-footer">
            <div>
                <i class="icomoon icon-setting-fill"></i>
                <span>设置</span>
            </div>
        </footer>
    </div>
    <div class="wrapper" data-struct="header footer">
        <header class="header">
            <div class="left-button" data-action="open-left-menu">
                <button type="button" class="btn">
                    <i class="icomoon icon-menu"></i>
                </button>
            </div>
            <div class="right-button">
                <div class="btn-group" align="right">
                    <button class="btn btn-theme btn-unstyled btn-dropdown nocaret" data-toggle="dropdown">
                        <i class="icomoon icon-more"></i>
                    </button>
                    <ul class="list link dropdown arrow">
                        <li><a href="javascript:;">DropDownItem 1</a></li>
                        <li><a href="javascript:;">DropDownItem 2</a></li>
                        <li><a href="javascript:;">DropDownItem 3</a></li>
                        <li><a href="javascript:;">DropDownItem 4</a></li>
                        <li><a href="javascript:;">DropDownItem 5</a></li>
                    </ul>
                </div>
            </div>
            <div class="head-center">
                Title
            </div>
        </header>
        <div class="container" role="main">

            <h3 id="Text">Text</h3>
            <ul class="controls">
                <li><h1>Heading</h1></li>
                <li><h2>Heading</h2></li>
                <li><h3>Heading</h3></li>
                <li><h4>Heading</h4></li>
                <li><h5>Heading</h5></li>
                <li><h6>Heading</h6></li>
                <li><span class="text-primary"> Mobile Layout Framework</span></li>
                <li><span class="text-success"> Mobile Layout Framework</span></li>
                <li><span class="text-info">    Mobile Layout Framework</span></li>
                <li><span class="text-warning"> Mobile Layout Framework</span></li>
                <li><span class="text-danger">  Mobile Layout Framework</span></li>
                <li><span class="text-muted">   Mobile Layout Framework</span></li>
            </ul>

            <h3 id="Link">Link</h3>
            <ul class="controls">
                <li>
                    <a href="javascript:;">default</a>
                    <a href="javascript:;" class="text">text</a>
                    <a href="javascript:;" class="gray">gray</a>
                    <a href="tel:10086">10086</a>
                    <a href="tel:10010">10010</a>
                </li>
                <li>
                    <a href="javascript:;" class="btn btn-theme btn-sm">LinkButton</a>
                    <a href="javascript:;" class="btn btn-sm disabled">LinkButton</a>
                </li>
            </ul>

            <h3 id="Button">Button</h3>
            <ul class="controls">
                <li>
                    <button type="button" class="btn btn-primary">Submit</button>
                </li>
                <li>
                    <button type="button" class="btn btn-success">Submit</button>
                </li>
                <li>
                    <button type="button" class="btn btn-info">Submit</button>
                </li>
                <li>
                    <button type="button" class="btn btn-warning">Submit</button>
                </li>
                <li>
                    <button type="button" class="btn btn-danger">Submit</button>
                </li>
                <li>
                    <button type="button" class="btn btn-sm btn-default">提交</button>
                    <button type="button" class="btn btn-theme btn-sm">提交</button>
                    <button type="button" class="btn btn-sm" disabled>提交</button>
                </li>
                <li>
                    <div class="btn-group block">
                        <div class="align-right">
                            <button type="button" class="btn btn-sm btn-theme">确定</button>
                        </div>
                        <div class="align-left">
                            <input type="text" />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="btn-group block merge">
                        <div class="align-right">
                            <button type="button" class="btn btn-sm btn-theme">确定</button>
                        </div>
                        <div class="align-left">
                            <input type="text" />
                        </div>
                    </div>
                </li>
                <li>
                    <div class="btn-group block">
                        <button type="button" class="btn btn-theme btn-dropdown" data-toggle="dropdown">DropDownButton</button>
                        <ul class="list dropdown">
                            <li>DropDownItem 1</li>
                            <li>DropDownItem 2</li>
                            <li>DropDownItem 3</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="btn-group block" role="combobox">
                        <button id="btnDropDown" type="button" class="btn btn-default btn-dropdown" data-toggle="dropdown">DropDownButton</button>
                        <ul class="list dropdown">
                            <li data-value="1">DropDownItem 1</li>
                            <li data-value="2">DropDownItem 2</li>
                            <li data-value="3">DropDownItem 3</li>
                        </ul>
                    </div>
                </li>
            </ul>

            <h3 id="Input">Input</h3>
            <ul class="controls">
                <li>
                    <input type="text" />
                </li>
                <li>
                    <input type="text" class="txt-sm" />
                </li>
                <li>
                    <input type="text" class="txt-icon-left icon-phone" value="15021955295" />
                </li>
                <li>
                    <div class="txt-icon-right">
                        <i class="icon-phone"></i>
                        <input type="text" value="15021955295" />
                    </div>
                </li>
                <li>
                    <select>
                        <option>List Item 1</option>
                        <option>List Item 2</option>
                        <option>List Item 3</option>
                    </select>
                </li>
                <li>
                    <label class="checkbox">
                        <input type="checkbox" />
                        <label class="icon"></label>
                        多选框
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" />
                        <label class="icon"></label>
                        多选框
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" />
                        <label class="icon"></label>
                        多选框
                    </label>
                </li>
                <li>
                    <label class="radio">
                        <input type="radio" name="rdoTest" />
                        <label class="icon"></label>
                        单选框
                    </label>
                    <label class="radio">
                        <input type="radio" name="rdoTest" />
                        <label class="icon"></label>
                        单选框
                    </label>
                    <label class="radio">
                        <input type="radio" name="rdoTest" />
                        <label class="icon"></label>
                        单选框
                    </label>
                </li>
                <li>
                    <label class="checkbox">
                        <input type="checkbox" />
                        <label class="icon"></label>
                        <label class="text">复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框复选框</label>
                    </label>
                </li>
                <li>
                    <label class="radio">
                        <input name="rdoTest" type="radio" />
                        <label class="icon"></label>
                        <label>单选框单选框单选框单选框单选框单选框单选框单选框单选框单选框单选框单选框单选框单选框单选框单选框单选框单选框</label>
                    </label>
                </li>
            </ul>

            <h3 id="Tab&List">Tab & List</h3>
            <ul>
                <li>
                    <div class="tabs-scrollbar">
                        <ul class="tabs three" data-toggle="tabs">
                            <li class="active" data-target="#list">普通列表</li>
                            <li data-target="#listJustify">两端对齐</li>
                            <li data-target="#gapLeft">左间隙</li>
                        </ul>
                    </div>
                    <div class="tab-targets">
                        <ul id="list" class="list">
                            <li>list item</li>
                            <li>list item</li>
                            <li>list item</li>
                        </ul>
                        <ul id="listJustify" class="list">
                            <li>
                                <div class="align-left">label</div>
                                <div class="align-right">value</div>
                            </li>
                            <li>
                                <div class="align-left">label</div>
                                <div class="align-right">value</div>
                            </li>
                            <li>
                                <div class="align-left">label</div>
                                <div class="align-right">value</div>
                            </li>
                        </ul>
                        <ul id="gapLeft" class="list gap-left">
                            <li>list item</li>
                            <li>list item</li>
                            <li>list item</li>
                        </ul>
                    </div>
                </li>
                <li class="margin-top-20">
                    <ul class="tabs three" data-toggle="tabs">
                        <li class="active" data-target="#gapRight">右间隙</li>
                        <li data-target="#gap">两边间隙</li>
                        <li data-target="#listArrow">右箭头</li>
                    </ul>
                    <div class="tab-targets">
                        <ul id="gapRight" class="list gap-right">
                            <li>list item</li>
                            <li>list item</li>
                            <li>list item</li>
                        </ul>
                        <ul id="gap" class="list gap">
                            <li>list item</li>
                            <li>list item</li>
                            <li>list item</li>
                        </ul>
                        <ul id="listArrow" class="list arrow">
                            <li>
                                list item
                                <span class="icomoon icon-arrow"></span>
                            </li>
                            <li>
                                list item
                                <span class="icomoon icon-arrow"></span>
                            </li>
                            <li>list item</li>
                        </ul>
                    </div>
                </li>
            </ul>

            <h3 id="Modal">Modal</h3>
            <ul class="controls">
                <li><button id="btnMessage" type="button" class="btn btn-theme">modal.message("123")</button></li>
                <li><button id="btnLoading" type="button" class="btn btn-theme">modal.loading()</button></li>
                <li><button id="btnModal" type="button" class="btn btn-theme">$(selector).modal({...})</button></li>
                <li><button id="btnModal1" type="button" class="btn btn-theme">Confirm and Cancel</button></li>
            </ul>

            <h3 id="Counter">Counter</h3>
            <ul class="controls">
                <li>
                    计数器：<span id="myCounter"></span>
                    <div class="margin-top-5 text-right">
                        <button id="btnCounterStart" type="button" class="btn btn-mini">开始</button>
                        <button id="btnCounterPause" type="button" class="btn btn-mini">暂停</button>
                        <button id="btnCounterReset" type="button" class="btn btn-mini">复位</button>
                    </div>
                </li>
            </ul>

            <h3 id="Timer">Timer</h3>
            <ul class="controls">
                <li>
                    计时器：<span id="myTimer"></span>
                    <div class="margin-top-5 text-right">
                        <button id="btnTimerStart" type="button" class="btn btn-mini">开始</button>
                        <button id="btnTimerPause" type="button" class="btn btn-mini">暂停</button>
                        <button id="btnTimerReset" type="button" class="btn btn-mini">复位</button>
                    </div>
                </li>
            </ul>

            <h3 id="ShoppingCart">Shopping Cart</h3>
            <ul class="controls">
                <li>
                    <ul class="list nogap">
                        <li class="clearfix">
                            <div class="btn-group shopping-cart float-right">
                                <span class="icon-sub icomoon icon-minus" data-action="sub"></span>
                                <input type="text" value="2" class="count" data-price="10" />
                                <span class="icon-add icomoon icon-plus" data-action="add"></span>
                            </div>
                            <div>商品1</div>
                            <div class="margin-top-5">￥10</div>
                        </li>
                        <li class="clearfix">
                            <div class="btn-group shopping-cart float-right">
                                <input type="number" value="3" data-price="15" />
                                <span class="icon-sub icomoon icon-minus" data-action="sub"></span>
                                <span class="count"></span>
                                <span class="icon-add icomoon icon-plus" data-action="add"></span>
                            </div>
                            <div>商品2</div>
                            <div class="margin-top-5">￥15</div>
                        </li>
                        <li class="clearfix">
                            <div class="btn-group shopping-cart float-right">
                                <input type="number" data-price="20" />
                                <span class="icon-sub icomoon icon-minus" data-action="sub"></span>
                                <span class="count"></span>
                                <span class="icon-add icomoon icon-plus" data-action="add"></span>
                            </div>
                            <div>商品3</div>
                            <div class="margin-top-5">￥20</div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="float-right">
                        总价：￥<span id="totalPrice"></span>
                    </div>
                    <div>
                        总数：<span id="totalGoods"></span>
                    </div>
                </li>
            </ul>

            <h3 id="Switch">Switch</h3>
            <ul class="controls">
                <li>
                    <div class="switch" data-toggle-class="off"></div>
                </li>
            </ul>

            <h3 id="Loading">Loading</h3>
            <ul class="controls">
                <li>
                    <div class="loading-box">
                        <div class="loading-block"></div>
                        <div class="loading-block"></div>
                        <div class="loading-block"></div>
                        <div class="loading-block"></div>
                        <div class="loading-block"></div>
                        <div class="loading-block"></div>
                    </div>
                    <i class="icomoon icon-loading"></i>
                    <i class="loading-img"></i>
                </li>
            </ul>

            <h3 id="Slides">Slides</h3>
            <div id="swiper1" class="swiper-container demo">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <!--<div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>-->
                <!-- 如果需要滚动条 -->
                <!--<div class="swiper-scrollbar"></div>-->
            </div>

            <h3 id="ImageView">Image View</h3>
            <!-- li的背景图是缩略图，data-url是大图路径 -->
            <ul class="image-grid">
                <li style="background-image: url('/Content/LMS/images/img1.jpg')" data-url="/Content/LMS/images/img1.jpg"></li>
                <li style="background-image: url('/Content/LMS/images/img2.jpg')" data-url="/Content/LMS/images/img2.jpg"></li>
                <li style="background-image: url('/Content/LMS/images/img3.jpg')" data-url="/Content/LMS/images/img3.jpg"></li>
            </ul>

            <h3 id="Emoticon">Emoticon</h3>
            <div class="component-emoticon">
                <textarea id="txtComment"></textarea>
                <div>
                    <div class="align-left">
                        <div class="btn-switch btn-emoticon" data-input="#txtComment">
                            <i class="icomoon icon-laugh"></i>
                            <i class="icomoon icon-keyboard"></i>
                        </div>
                    </div>
                    <div class="align-right">
                        <button id="btnPublish" type="button" class="btn btn-theme btn-xs" data-dismiss="emoticon" data-clear="#txtComment">发表</button>
                    </div>
                </div>
                <div data-part="emoticon"></div>
            </div>
            <ul id="listEmoticon" class="list-comment"></ul>

            <h3>Expand</h3>
            <ul class="controls">
                <li>
                    <div id="expand" class="expand">
                        <p class="expand-wrapper">
                            篮球场上的数学原理篮球场上的数学原理篮球场上的数学原理篮球场上的数学原理
                            篮球场上的数学原理篮球场上的数学原理篮球场上的数学原理
                        </p>
                        <div class="btn-expand" data-toggle-class="active" data-target="#expand">
                            <i class="icomoon icon-arrow"></i>
                        </div>
                    </div>
                </li>
            </ul>

            <h3>Appraise</h3>
            <ul class="controls">
                <li>
                    <input id="hidAppraise" type="hidden" />
                    <ul class="list-appraise" data-init="3" data-input="#hidAppraise">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
            </ul>
        </div>
        <footer class="footer">
            <nav>
                <ul class="nav tabs five" data-toggle="tabs">
                    <li class="active">
                        <div class="tab-icon">
                            <i class="icomoon icon-compass"></i>
                            <i class="icomoon icon-compass-fill"></i>
                        </div>
                        <div class="tab-text">发现</div>
                    </li>
                    <li>
                        <div class="tab-icon">
                            <i class="icomoon icon-compass"></i>
                            <i class="icomoon icon-compass-fill"></i>
                        </div>
                        <div class="tab-text">发现</div>
                    </li>
                    <li>
                        <div class="tab-icon">
                            <i class="icomoon icon-compass"></i>
                            <i class="icomoon icon-compass-fill"></i>
                        </div>
                        <div class="tab-text">发现</div>
                    </li>
                    <li>
                        <div class="tab-icon">
                            <i class="icomoon icon-compass"></i>
                            <i class="icomoon icon-compass-fill"></i>
                        </div>
                        <div class="tab-text">发现</div>
                    </li>
                    <li>
                        <div class="tab-icon">
                            <i class="icomoon icon-compass"></i>
                            <i class="icomoon icon-compass-fill"></i>
                        </div>
                        <div class="tab-text">发现</div>
                    </li>
                </ul>
            </nav>
        </footer>
    </div>
    <div id="myModal" class="modal-wrapper">
        <div class="modal-container modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="message">这是测试弹窗</div>
                </div>
            </div>
        </div>
    </div>
    <script src="/Content/LMS/js/jquery/jquery-1.11.2.js"></script>
    <script src="/Content/LMS/js/fastclick/fastclick.js"></script>
    <script src="/Content/LMS/plugins/modal/modal.js"></script>
    <script src="/Content/LMS/plugins/swiper3/swiper.jquery.min.js"></script>
    <script src="/Content/LMS/plugins/imageview/swiper.imageview.js"></script>
    <script src="/Content/LMS/js/global.js"></script>
    <script type="text/javascript">
        $(function () {

            var $container = $('[role="main"]');
            //Global.PullRefresh($container, function (opt) {
            //    //模仿ajax请求回调
            //    setTimeout(function () {
            //        opt.complete();
            //    }, 1000);
            //});
            Global.BindBackToTop($container);
            Global.RecordScrollTop($container);

            /*$("#btnDropDown").onselected(function (value, text) {
                console.log({ value: value, text: text });
            });*/
            $("#btnDropDown").on("selected", function (evt, value, text) {
                console.log({ value: value, text: text });
            });

            $("#btnMessage").click(function () {
                modal.message("123");
            });

            $("#btnLoading").click(function () {
                modal.loading();
                setTimeout(function () {
                    modal.close(function () {
                        modal.message("加载完成");
                    });
                }, 2000);
            });

            $("#btnModal").click(function () {
                $("#myModal").modal();
            });

            $("#btnModal1").click(function () {
                modal.confirm("确定关闭吗？", function () {
                    console.log("confirmed");
                });
            });

            var myCounter = new Global.Counter("#myCounter", 10, {
                timespan: 100,
                decrement: 0.1,
                toFixed: 1,
                complete: function () {
                    modal.message("记数完成");
                }
            });
            $("#btnCounterStart").click(function () {
                myCounter.start();
            });
            $("#btnCounterPause").click(function () {
                myCounter.pause();
            });
            $("#btnCounterReset").click(function () {
                myCounter.reset();
            });

            var myTimer = new Global.Timer("#myTimer", "01:03", {
                tick: function () {

                },
                complete: function () {
                    modal.message("计时完成");
                }
            })
            $("#btnTimerStart").click(function () {
                myTimer.start();
            });
            $("#btnTimerPause").click(function () {
                myTimer.pause();
            });
            $("#btnTimerReset").click(function () {
                myTimer.reset();
            });

            Global.BindShoppingCart({
                update: function (total) {
                    $("#totalGoods").text(total.count);
                    $("#totalPrice").text(total.price);
                }
            });

            var swiper1 = new Swiper("#swiper1", {

                //direction: 'vertical',  //垂直滑动，默认水平
                //loop: true,             //循环

                // 如果需要分页器
                pagination: '#swiper1 .swiper-pagination',

                // 如果需要前进后退按钮
                nextButton: '#swiper1 .swiper-button-next',
                prevButton: '#swiper1 .swiper-button-prev',

                //// 如果需要滚动条
                //scrollbar: '.swiper-scrollbar',
            })

            $(".image-grid").on("click", "li", function () {
                var imageView = new ImageView({
                    container: $(this).closest(".image-grid"),
                    selector: "li",
                    current: $(this).index()
                })
            });
            
            //表情
            Global.Emoticon.Load();
            $("#btnPublish").click(function () {
                var comment = $("#txtComment").val();
                if (comment == "") {
                    modal.message("请输入内容");
                    return;
                }
                $("#listEmoticon").append("<li>" + Global.Emoticon.Replace(comment) + "</li>");
            });
            Global.Emoticon.LoadConfig(function () {
                //如果页面不加载表情插件，必须保证配置文件加载后才能转义
                var content = Global.Emoticon.Replace("[微笑][微笑][微笑]");
                $("#listEmoticon").append("<li>" + content + "</li>");
            });

            Global.InitAppraise();

        })
    </script>
<script type="text/javascript" charset="utf-8" src="http://192.168.1.51:8132/livereload.js"></script></body>
</html>